<script setup>
import { computed } from 'vue';
import { Position, Handle } from '@vue-flow/core';

const props = defineProps({
  position: {
    type: Object,
    required: true,
  },
});

const x = computed(() => `${Math.round(props.position.x)}px`);
const y = computed(() => `${Math.round(props.position.y)}px`);
</script>

<template>
  <div class="vue-flow__node-default">
    <div>template #node-special来的数据</div>

    <div>{x} {y}</div>

    <!-- each of these handles needs a unique id since we're using two `source` type handles -->
    <Handle id="source-a" type="source" :position="Position.Top" />

    <!-- each of these handles needs a unique id since we're using two `target` type handles -->
    <Handle id="target-a" type="target" :position="Position.Left" />
    <Handle id="target-b" type="target" :position="Position.Bottom" />

    <Handle id="source-a" type="source" :position="Position.Right" style="top: 10px" />
    <Handle id="source-b" type="source" :position="Position.Right" style="bottom: 10px; top: auto" />
  </div>
</template>
